<template>
    <div class="discussion">
      <h2>讨论区互动</h2>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="发表的主题" name="topics">
          <el-divider></el-divider>
          <el-list>
            <el-list-item v-for="(topic, index) in topics" :key="index">
              <p class="topic-title" @click="viewTopic(topic)">{{ topic.title }}</p>
              <p class="topic-info">
                <span class="author">{{ topic.author }}</span> 发表于 {{ topic.date }} | 来自 "<span class="category">{{ topic.category }}</span>"
              </p>
            </el-list-item>
            <el-divider></el-divider>
          </el-list>
          <el-button type="primary" @click="postDialogVisible = true" style="margin-top: 20px;">发布讨论</el-button>
          <el-dialog title="发布讨论" v-model="postDialogVisible" width="30%">
            <el-form ref="postForm" :model="newTopic" label-width="80px">
              <el-form-item label="标题" required>
                <el-input v-model="newTopic.title" placeholder="请输入标题"></el-input>
              </el-form-item>
              <el-form-item label="内容" required>
                <el-input type="textarea" v-model="newTopic.content" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-form>
            <template v-slot:footer>
              <span class="dialog-footer">
                <el-button @click="postDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitTopic">发布</el-button>
              </span>
            </template>
          </el-dialog>
        </el-tab-pane>
        <el-tab-pane label="发表的回复" name="replies">
          <el-card v-for="(reply, index) in replies" :key="index" class="reply-card">
            <p>{{ reply.content }}</p>
            <p>{{ reply.author }} 回复于 {{ reply.date }} | 来自 "{{ reply.topic }}"</p>
            <div class="actions">
              <el-button type="text" @click="editReply(reply)">编辑</el-button>
              <el-button type="text" @click="deleteReply(reply)">删除</el-button>
            </div>
          </el-card>
        </el-tab-pane>
        
      </el-tabs>
    </div>
  </template>
  
  <script>
  export default {
    name: 'DiscussionBoard',
    data() {
      return {
        activeTab: 'topics', // 默认展示主题标签页
        topics: [
          {
            title: '如何平衡和调整不同属性和数值之间的关系？',
            author: '张三',
            date: '2024年4月1日',
            category: '游戏开发'
          },
          {
            title: '如何平衡和调整不同属性和数值之间的关系？',
            author: '张三',
            date: '2024年4月1日',
            category: '游戏开发'
          },
          {
            title: '如何平衡和调整不同属性和数值之间的关系？',
            author: '张三',
            date: '2024年4月1日',
            category: '游戏开发'
          },
          {
            title: '如何平衡和调整不同属性和数值之间的关系？',
            author: '张三',
            date: '2024年4月1日',
            category: '游戏开发'
          }
          // 其他主题数据按需添加
        ],
        replies: [
          // 回复数据按需添加
        ],
        comments: [
          // 评论数据按需添加
        ],
        postDialogVisible: false,
        newTopic: {
          title: '',
          content: ''
        }
      };
    },
    methods: {
      viewTopic(topic) {
        // 跳转到其他页面的逻辑，比如路由跳转
        this.$router.push({ path: '/topic-detail', query: { title: topic.title } });
      },
      submitTopic() {
        if (this.newTopic.title && this.newTopic.content) {
          const newTopic = {
            title: this.newTopic.title,
            author: '当前用户',
            date: new Date().toLocaleDateString('zh-CN'),
            category: '未分类',
            content: this.newTopic.content
          };
          this.topics.push(newTopic);
          this.postDialogVisible = false;
          this.$refs.postForm.resetFields();
          this.resetNewTopic();
        } else {
          this.$message.error('请输入标题和内容');
        }
      },
      resetNewTopic() {
        this.newTopic = {
          title: '',
          content: ''
        };
      },
      editTopic() {
        // 编辑主题逻辑
      },
      deleteTopic() {
        // 删除主题逻辑
      },
      editReply() {
        // 编辑回复逻辑
      },
      deleteReply() {
        // 删除回复逻辑
      },
      editComment() {
        // 编辑评论逻辑
      },
      deleteComment() {
        // 删除评论逻辑
      }
    }
  };
  </script>
  
  <style scoped>
  .discussion {
    position: absolute;
    left: 350px;
    top: 85px;
    width: 1570px;
    height: 2853px;
    opacity: 1;
    background: rgba(245, 245, 245, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 20px;
  }
  
  h2 {
    color: #409EFF;
    font-size: 24px;
    margin-bottom: 20px;
  }
  
  .el-tabs {
    width: 100%;
  }
  
  .el-list-item {
    margin-bottom: 10px;
    font-size: 16px;
  }
  
  .el-divider {
    margin: 10px 0;
  }
  
  .topic-title {
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #282c30;
  }
  
  .topic-title:hover {
    text-decoration: underline;
  }
  
  .topic-info {
    font-size: 14px;
    color: rgba(96, 102, 102, 0.8);
  }
  
  .author, .category {
    color: #409EFF;
  }
  
  .el-button {
    margin-top: 10px;
  }
  </style>